{% extends "base.html" %}

{% block title %}患者端 - 康复预测系统{% endblock %}

{% block sidebar %}
<nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
    <div class="position-sticky pt-3">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#overview">
                    <i class="fas fa-home me-2"></i>康复概览
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#plan">
                    <i class="fas fa-calendar-alt me-2"></i>康复计划
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#progress">
                    <i class="fas fa-chart-line me-2"></i>进度跟踪
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#reminders">
                    <i class="fas fa-bell me-2"></i>提醒通知
                </a>
            </li>
        </ul>
    </div>
</nav>
{% endblock %}

{% block content %}
<div id="overview">
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">我的康复中心</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <span class="badge bg-success me-2" id="patientStatus">康复中</span>
            <button class="btn btn-sm btn-outline-secondary" onclick="refreshData()">
                <i class="fas fa-sync-alt"></i> 刷新
            </button>
        </div>
    </div>

    <!-- 康复概览卡片 -->
    <div class="row">
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="text-value-lg" id="daysCompleted">0</div>
                            <div>已完成天数</div>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-calendar-check fa-3x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <small>总康复天数: <span id="totalDays">0</span>天</small>
                    <div class="progress progress-white progress-xs mt-2">
                        <div class="progress-bar" id="completionProgress" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="text-value-lg" id="nextAppointment">--</div>
                            <div>下次复诊</div>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-3x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <small>主治医生: <span id="assignedDoctor">李医生</span></small>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6 mb-4">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <div class="text-value-lg" id="currentMobility">0%</div>
                            <div>当前活动能力</div>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-walking fa-3x"></i>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <small>目标: <span id="targetMobility">100%</span></small>
                    <div class="progress progress-white progress-xs mt-2">
                        <div class="progress-bar" id="mobilityProgress" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 康复计划 -->
    <div class="row mt-4">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">今日康复任务</h5>
                </div>
                <div class="card-body">
                    <div id="dailyTasks">
                        <div class="task-item mb-3 p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6>关节活动训练</h6>
                                    <p class="mb-1">上午 9:00 - 10:00</p>
                                    <small class="text-muted">持续时间: 60分钟</small>
                                </div>
                                <span class="badge bg-success">已完成</span>
                            </div>
                        </div>
                        <div class="task-item mb-3 p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6>肌肉力量训练</h6>
                                    <p class="mb-1">下午 3:00 - 4:00</p>
                                    <small class="text-muted">持续时间: 60分钟</small>
                                </div>
                                <span class="badge bg-warning">进行中</span>
                            </div>
                        </div>
                        <div class="task-item mb-3 p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6>平衡训练</h6>
                                    <p class="mb-1">晚上 7:00 - 7:30</p>
                                    <small class="text-muted">持续时间: 30分钟</small>
                                </div>
                                <span class="badge bg-secondary">待开始</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">康复进度</h5>
                </div>
                <div class="card-body">
                    <canvas id="progressChart" width="300" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- 进度跟踪 -->
    <div class="row mt-4" id="progress">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">康复进度跟踪</h5>
                </div>
                <div class="card-body">
                    <div id="progressVisualization">
                        <img id="progressImage" src="" alt="康复进度图表" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 提醒通知 -->
    <div class="row mt-4" id="reminders">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">提醒通知</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        明天上午9点有复诊安排，请准时到达
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        请按时完成今日的康复训练任务
                    </div>
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        您的康复进度良好，继续保持！
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 初始化页面数据
document.addEventListener('DOMContentLoaded', function() {
    loadPatientData();
    initializeProgressChart();
});

// 加载患者数据
function loadPatientData() {
    // 模拟患者数据
    const patientData = {
        daysCompleted: 15,
        totalDays: 90,
        nextAppointment: '2024-12-25 09:00',
        currentMobility: 65,
        targetMobility: 100,
        assignedDoctor: '李医生'
    };

    // 更新页面数据
    document.getElementById('daysCompleted').textContent = patientData.daysCompleted;
    document.getElementById('totalDays').textContent = patientData.totalDays;
    document.getElementById('nextAppointment').textContent = patientData.nextAppointment;
    document.getElementById('currentMobility').textContent = patientData.currentMobility + '%';
    document.getElementById('targetMobility').textContent = patientData.targetMobility + '%';
    document.getElementById('assignedDoctor').textContent = patientData.assignedDoctor;

    // 更新进度条
    const completionPercent = (patientData.daysCompleted / patientData.totalDays * 100).toFixed(1);
    document.getElementById('completionProgress').style.width = completionPercent + '%';
    
    const mobilityPercent = (patientData.currentMobility / patientData.targetMobility * 100).toFixed(1);
    document.getElementById('mobilityProgress').style.width = mobilityPercent + '%';
}

// 初始化进度图表
function initializeProgressChart() {
    const ctx = document.getElementById('progressChart').getContext('2d');
    const progressChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['已完成', '剩余'],
            datasets: [{
                data: [15, 75],
                backgroundColor: ['#28a745', '#e9ecef'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': ' + context.raw + '天';
                        }
                    }
                }
            }
        }
    });
}

// 刷新数据
function refreshData() {
    loadPatientData();
    
    // 显示刷新提示
    const refreshBtn = event.target;
    const originalHtml = refreshBtn.innerHTML;
    refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 刷新中';
    
    setTimeout(() => {
        refreshBtn.innerHTML = originalHtml;
        showToast('数据已刷新', 'success');
    }, 1000);
}

// 显示提示消息
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-white bg-${type} border-0`;
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    
    document.body.appendChild(toast);
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    
    toast.addEventListener('hidden.bs.toast', () => {
        document.body.removeChild(toast);
    });
}

// 加载康复进度可视化
function loadProgressVisualization() {
    fetch('/api/visualization/patient_progress/1')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('progressImage').src = data.plot_url;
            }
        })
        .catch(error => {
            console.error('加载进度可视化失败:', error);
        });
}
</script>
{% endblock %}